<template>
	<view class="container">
		<u-navbar :title="title" :bgColor="config.bg" :titleStyle="{color:config.color}"
			:leftIconColor="leftIconColor" placeholder :autoBack="autoBack"
			:leftIcon="leftIcon" @leftClick="leftClick">
			<template #right>
				<view class="text-white flex items-center gap-1 text-xs" @click="action.show=true">{{$t('index.yuyan')}} <u-icon
						name="arrow-down-fill" :color="config.color" size="12"></u-icon></view>
			</template>
		</u-navbar>
		<u-picker :show="action.show" :columns="languageList" keyName="name" @cancel="action.show=false"
			@confirm="selectAction" @close="action.show=false"></u-picker>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		props:{
			title:{
				type: String,
				default: ""
			},
			leftIconColor:{
				type: String,
				default: ""
			},
			leftIcon:{
				type: String,
				default: ""
			},
			autoBack:{
				type: Boolean,
				default: false
			},
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config','languageList']),
		},
		components: {},
		data() {
			return {
				action: {
					show: false,
				},

			}
		},
		onLoad(op) {
		},
		methods: {
			...mapActions(['changeLang']),
			//选择语言
			selectAction(e) {
				this.action.show = false
				let id = e.value[0].id
				this.$i18n.locale = id
				this.changeLang(id)
			},
			leftClick(e){
				this.$emit('leftClick',e)
			}
		}
	}
</script>

<style lang="scss">
</style>